<template>
	<view class="search">
		<!--f1:搜索 -->
		<view class="f1">
			<uni-icons @click="goBack" type="back" color="white" size="50rpx"></uni-icons>
			<uni-search-bar v-model="kw" @input="doInput" @confirm="doConfirm" class="search-bar" cancelButton="none" placeholder="请输入商品名称关键字"></uni-search-bar>
		</view>
		<!-- f2:搜索列表 -->
		<view class="f2">
			<text class="no-data" v-show="showNoData">没有查询到相关商品</text>
			<uni-list>
				<uni-list-item v-for="(p,i) in plist" :key="i" :title="p.title" :thumb="$base+p.pic" ellipsis="1" link :to="`/pages/details/details?lid=${p.lid}`"></uni-list-item>
			</uni-list>
		</view>
		<!-- f3:搜索建议 -->
		<view class="f3">
			<uni-card isFull title="热门搜索">
						<uni-tag @click="kw='神州'" class="tag" type="primary" text="神州" circle inverted/>
						<uni-tag @click="kw='Apple'" class="tag" type="warning" text="Apple" circle />
						<uni-tag @click="kw='轻薄'" class="tag" type="error" text="轻薄" circle />
						<uni-tag @click="kw='联想'" class="tag" type="default" text="联想" circle />
						<uni-tag @click="kw='小米'" class="tag" type="success" text="小米" circle />
						<uni-tag @click="kw='惠普'" class="tag" type="primary" text="惠普" circle />
						<uni-tag @click="kw='办公'" class="tag" type="warning" text="办公" circle />
						<uni-tag @click="kw='工作站'" class="tag" type="error" text="工作站" circle />
						<uni-tag @click="kw='华硕'" class="tag" type="default" text="华硕" circle />
						<uni-tag @click="kw='雷神'" class="tag" type="success" text="雷神" circle />
						<uni-tag @click="kw='燃7000'" class="tag" type="primary" text="燃7000" circle />
						<uni-tag @click="kw='MacBook'" class="tag" type="warning" text="MacBook" circle />
					</uni-card> 
		</view>
	</view>
</template>

<script>
import { productList } from '../../service'
	export default {
		data() {
			return {
				kw:'',//绑定搜索条内容
				plist:[],
				showNoData:false,
				timer:null,
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			doInput(){
				let kw = this.kw.trim()
				if(this.timer){
					clearTimeout(this.timer)
					this.timer = null
					
				}
				if(!kw){
					this.plist = []
					return
				}
				this.timer = setTimeout(async ()=>{
					let data = await productList(1,kw)
					if(data.recordCount>0){
						this.plist = data.data
						this.showNoData = false
					}else {
						this.plist = []
						this.showNoData = true
					}
				},1000)
			},
			async doConfirm(){
				let kw = this.kw.trim()
				if(!kw){
					uni.showToast({
						title:'关键字不能为空',
						icon:'error',
						duration:3000,
					})
					return
				}
				let data = await productList(1,kw)
				console.log(data);
				if(data.recordCount>0){
					this.plist = data.data
					this.showNoData = false
				}else{
					this.plist = []
					this.showNoData = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.search {
		.f1 {
			display: flex;
			align-items: center;
			height: 80rpx;
			background-color: $uni-color-primary;
			.search-bar {
				flex: 1;
			}
		}
		.f2 {
			.no-data {
				display: block;
				text-align: center;
				padding: $uni-spacing-col-base 0;
				color: $uni-text-color-grey;
			}
		}
		.f3 {
			margin-top: $uni-spacing-col-base;
			.tag {
				display: inline-block;
				margin-right: $uni-spacing-row-base;
				margin-bottom: $uni-spacing-col-base;
			}
		}
	}
</style>
